<style scoped lang="scss">
  .chart{
    width: 39vw;
    height:25vw;
  }
  .china_lis{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    .li{
      span:first-child{
        font-size: 0.625vw;
        /*color: #29c4d5;*/
        color: red !important;
      }
      span:last-child{
        font-size: 0.677vw;
        color: #e3e3e3;
      }
    }
  }
  .hello{
    position: relative;
    .backchina{
      position: absolute;
      left: 1.5625vw;
      top: 2.6vw;
      z-index: 100;
      font-size: 1.25vw;
      color: #149dc3;
      cursor: pointer;
    }
  }
</style>

<template>
  <div class="hello">
    <div class="chart" id="chart"></div>
    <i class="el-icon-place backchina" color="blue" v-show="resetFlag"  size="large" @click="resetChina"></i>
  </div>
</template>

<script>
//  import echarts from 'echarts'
import {listSiteInfo} from "@/api/screem";
import request from '@/router/axios';

export default {
  name: 'china',
  props: {
    msg: String
  },
  data() {
    return {
      info: {},
      resetFlag: false
    }
  },
  created() {
    this.init()
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('chart'));
    this.mychart = myChart
  },
  beforeDestroy() {
    if (this.mychart&& this.mychart.dispose) {
      this.mychart.dispose()
    }
  },
  methods: {
    initEcharts() {
      this.resetFlag = false
      var that=this
      var data = [
        {name: '深圳', value: 20},
      ];
      var geoCoordMap = {
        '深圳':[114.07,22.62],
      };
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value * (document.body.clientWidth  / 1920)),
              visualMap: false
            });
          }
        }
        return res;
      };
      var optionMap = {
        backgroundColor: 'transparent',
        tooltip : {
          trigger: 'item'
        },
        visualMap: {
          show : false,
          color: ['#149dc3']
        },
        grid: {
          left: '0',
          right: '0',
          top:'0',
          bottom: '0',
          containLabel: true
        },
        geo: [
          {
            // 地理坐标系组件
            map: 'china',
            roam: false, // 可以缩放和平移比例
            layoutCenter: ["50%", "50%"], // position位置
//          layoutSize: 370, // 地图大小，保证了不超过 370x370 的区域
            zoom: 1.1,
            label: {
              // 图形上的文本标签
              normal: {
                show: true,
                textStyle: {
                  color: "#21ffff",
                  fontSize: '8'
                }
              },
              emphasis: { // 高亮时样式
                color: "#21ffff"
              }
            },
            // 这里是重点！！！
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0.1, // 为 0 时不绘制该图形
                    borderColor: "#21ffff",
                  },
                  emphasis:{
                    opacity: 0.1, // 为 0 时不绘制该图形
                    borderColor: "#21ffff",
                  }
                },
                label: {
                  show: false // 隐藏文字
                }
              }
            ],
            itemStyle: {
              // 图形上的地图区域
              normal: {
                borderColor: "#21ffff",
                areaColor: "#149dc3"
              },
              emphasis: {
                // 高亮时
                areaColor:"#15688a",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 10,
                borderWidth: 0,
                shadowColor: "rgba(0, 93, 255, 0.2)"
              }
            },
          }
        ],
        tooltip: {
//        trigger: 'axis',
//        textStyle: {
//          fontSize: 12 * window.$ratio
//        },
          textStyle: {
            fontSize: 14 * (document.body.clientWidth  / 1920)
          },
          extraCssText: 'box-shadow: inset 0 0 2.08vw rgba(19, 140, 248, 0.9);',
          backgroundColor: 'rgba(0,0,0,0.3)',
          padding: [10 * (document.body.clientWidth  / 1920), 20 * (document.body.clientWidth  / 1920)],
          appendToBody: true,
          enterable: true,
//        axisPointer: {
//          type: 'line',
//          lineStyle: {
//            color: '#1b5070'
//          }
//        },
          //  formatter: '{b}: <br/>{d}%'
//          alwaysShowContent: true,
          formatter: (params)=> {
            return `<div class="china_lis">
                    <div class="li" style="margin-bottom: 0.26vw">
                      <span style="color:#29c4d5; font-size: 0.677vw; width: 4.167vw;display: inline-block">城市:</span>
                      <span style="color:#e3e3e3; font-size: 0.677vw">深圳</span>
                    </div>
                    <div class="li" style="margin-bottom: 0.26vw; display: flex;justify-content: space-between;align-items: flex-start">
                      <span style="color:#29c4d5; font-size: 0.677vw; width: 4.167vw;display: inline-block">处理站数量:</span>
                      <span style="color:#e3e3e3; font-size: 0.677vw; display: inline-block;
                      max-width: 7.8vw;
                      word-break: break-all;word-wrap: break-word;white-space: pre-wrap !important;">${that.info.length}</span>
                    </div>
                  </div>`
          }
        },
        //配置属性
        series: [
          {
            name: '热点',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function (a, b) {
              return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function (val) {
              return val[2];
            },
            encode: {
              value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
              color: 'rgba(227, 212, 0, 1)',
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              formatter: '{b}',
              position: 'right',
              show: true,
              fontSize: 12 * (document.body.clientWidth  / 1920)
            },
            itemStyle: {
              normal: {
                color: 'rgba(227, 212, 0, 1)',
                shadowBlur: 10,
                shadowColor: 'rgba(227, 212, 0, 1)',
              },

            },
            zlevel: 100
          }

        ]
      };
      //初始化echarts实例

      //使用制定的配置项和数据显示图表
      this.mychart.setOption(optionMap);
      this.mychart.on('click', (params)=>{
        console.log(params);
        if (params.name === '深圳') {
          this.mychart.clear()
          this.initShen()
        }
      });
      setTimeout( function  (){
        window.onresize =  () =>{
          console.log('onresz');
          that.mychart.resize();
        }
      },200)



    },
    resetChina() {
      if (this.mychart) {
        this.mychart.clear()
      }
      this.initEcharts()
    },
    init() {
      listSiteInfo()
        .then(res => {
          this.info = res.data || []
          this.initEcharts()
        })
    },
    initShen() {
      request('/geo/440300.geoJson')
        .then(res => {
          this.resetFlag = true
          var that=this
          echarts.registerMap('shenzhen', res);
          var myChart = echarts.init(document.getElementById('chart'));
          this.mychart = myChart

          var data = [
            {name: '深圳', value: 20},
          ];
          var geoCoordMap = {
            '东城站点':[114.07,22.62],
            'A站点':[114.00804948242188,22.553290000000004],
            'B站点':[114.29594010742188,22.574848838873617],
          };
          var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
              res.push({
                name: data[i].siteName,
                value: [data[i].longitude,data[i].latitude, 10 * (document.body.clientWidth  / 1920)],
                visualMap: false
              });
            }
            return res;
          };

          myChart.setOption({
            backgroundColor: 'transparent',
            tooltip : {
              trigger: 'item'
            },
            visualMap: {
              show : false,
              color: ['#149dc3']
            },
            grid: {
              left: '0',
              right: '0',
              top:'0',
              bottom: '0',
              containLabel: true
            },
            geo: [
              {
                // 地理坐标系组件
                map: "shenzhen",
                roam: false, // 可以缩放和平移比例
                layoutCenter: ["50%", "50%"], // position位置
//          layoutSize: 370, // 地图大小，保证了不超过 370x370 的区域
                zoom: 1.1,
                label: {
                  // 图形上的文本标签
                  normal: {
                    show: true,
                    textStyle: {
                      color: "#21ffff",
                      fontSize: '8'
                    }
                  },
                  emphasis: { // 高亮时样式
                    color: "#21ffff"
                  }
                },
                // 这里是重点！！！
                itemStyle: {
                  // 图形上的地图区域
                  normal: {
                    borderColor: "#21ffff",
                    areaColor: "#149dc3"
                  },
                  emphasis: {
                    // 高亮时
                    areaColor:"#15688a",
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 10,
                    borderWidth: 0,
                    shadowColor: "rgba(0, 93, 255, 0.2)"
                  }
                },
              }
            ],
            tooltip: {
              extraCssText: 'box-shadow: inset 0 0 2.08vw rgba(19, 140, 248, 0.9);',
              backgroundColor: 'rgba(0,0,0,0.3)',
              padding: [10* (document.body.clientWidth  / 1920), 20* (document.body.clientWidth  / 1920)],
              appendToBody: true,
              enterable: true,
//              alwaysShowContent: true,
              formatter: (params)=> {

                var infoP = {}
                that.info.forEach(item => {
                  if (item.siteName === params.name ) {
                    console.log(params);
                    infoP = item
                  }
                })
                //console.log(infoP);
                return `<div class="china_lis">
                    <div class="li" style="margin-bottom: 0.26vw">
                      <span style="color:#29c4d5; font-size: 0.677vw; width: 4.167vw;display: inline-block">站点名称:</span>
                      <span style="color:#e3e3e3; font-size: 0.677vw;">${infoP.siteName ||''}</span>
                    </div>
                    <div class="li" style="margin-bottom: 0.26vw; display: flex;justify-content: space-between;align-items: flex-start">
                      <span style="color:#29c4d5; font-size: 0.677vw; width: 4.167vw;display: inline-block">处理站地址:</span>
                      <span style="color:#e3e3e3; font-size: 0.677vw; display: inline-block;
                      max-width: 7.8vw;
                      word-break: break-all;word-wrap: break-word;white-space: pre-wrap !important;">${infoP.address || ''}</span>
                    </div>
                    <div class="li" style="margin-bottom: 0.26vw">
                      <span style="color:#29c4d5; font-size: 0.677vw; width: 4.167vw;display: inline-block">设计日处理量:</span>
                      <span style="color:#e3e3e3; font-size: 0.677vw;">${infoP.designDeal ||0}T</span>
                    </div>
                    <div class="li" style="margin-bottom: 0.26vw">
                      <span style="color:#29c4d5; font-size: 0.677vw; width: 4.167vw;display: inline-block">累计处理量:</span>
                      <span style="color:#e3e3e3; font-size: 0.677vw">${infoP.cumulativeDeal || 0}吨</span>
                    </div>
                  </div>`
              }
            },
            series: [
              {
                name: '站点',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(this.info),
                symbolSize: function (val) {
                  return val[2];
                },
                encode: {
                  value: 2
                },
                showEffectOn: 'render',
                rippleEffect: {
                  color: 'rgba(227, 212, 0, 1)',
                  brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                  formatter: '{b}',
                  position: 'right',
                  show: true,
                  fontSize: 12 * (document.body.clientWidth  / 1920)
                },
                itemStyle: {
                  normal: {
                    color: 'rgba(227, 212, 0, 1)',
                    shadowBlur: 10,
                    shadowColor: 'rgba(227, 212, 0, 1)',
                  },

                },
                zlevel: 100
              }

            ]
          });
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
